<!doctype html>

<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <title>图书管理系统</title>

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">


    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Material Design Lite">


    <!-- Tile icon for Win8 (144x144 + tile color) -->

    <meta name="msapplication-TileColor" content="#3372DF">


    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
    <!--
    <link rel="canonical" href="http://www.example.com/">
    -->

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.deep_purple-pink.min.css">
    <link rel="stylesheet" href="/static/css/styles.css">
      <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <style>
    #view-source {
      position: fixed;
      display: block;
      right: 0;
      bottom: 0;
      margin-right: 40px;
      margin-bottom: 40px;
      z-index: 900;
    }
    </style>
  </head>
  <body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
        <div class="mdl-layout--large-screen-only mdl-layout__header-row">
        </div>
        <div class="mdl-layout--large-screen-only mdl-layout__header-row">
          <h2>图书管理系统</h2>
        </div>
        <div class="mdl-layout--large-screen-only mdl-layout__header-row">
        </div>
        <div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
          <a href="/" class="mdl-layout__tab is-active">首页</a>
          <a href="/page1" class="mdl-layout__tab">分类</a>
          <a href="/page2" class="mdl-layout__tab">搜索</a>
            <a href="/page3" class="mdl-layout__tab">我的</a>
          <a href="/page4" class="mdl-layout__tab">登录</a>
          <a href="/page5" class="mdl-layout__tab">注册</a>
          <button onclick="location.href='/page2'" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent" id="add">

              <span class="material-icons">
                     search
                </span>
          </button>
        </div>
      </header>

      <main class="mdl-layout__content">
<div class="mdl-layout__tab-panel is-active" id="overview" v-cloak>

          <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
            <div class="mdl-card mdl-cell mdl-cell--12-col">
              <div class="mdl-card__supporting-text mdl-grid mdl-grid--no-spacing">
                <h4 class="mdl-cell mdl-cell--12-col">小组成员</h4>
                <div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                   <div class="section__circle-container__circle "><img src="https://i.loli.net/2020/12/16/SeCXkLqR5PHB6FU.jpg" style="width: 64px;height: 64px;border-radius: 50%"></div>
                </div>
                <div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                  <h5 style="font-size: 16px;font-weight: 700">韦奕铭</h5>
                    <br/><span style="font-size: 14px">负责项目的用户交互界面设计，前端内容的编写</span>
                </div>
                <div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                  <div class="section__circle-container__circle "><img src="/static/images/yang.jpg" style="width: 64px;height: 64px;border-radius: 50%"></div>
                </div>
                <div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                  <h5 style="font-size: 16px;font-weight: 700">杨锦涛</h5>
                    <br/><span style="font-size: 14px">负责本项目的组织，与实施，编写项目的后端内容</span>
                </div>
                <div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                  <div class="section__circle-container__circle "><img src="/static/images/zhang.jpg" style="width: 64px;height: 64px;border-radius: 50%"></div>
                </div>
                <div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                  <h5 style="font-size: 16px;font-weight: 700">张瑞</h5>
                    <br/><span style="font-size: 14px">负责数据库的概念结构设计，逻辑结构设计,数据库创建</span>
                </div>
                     <div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                   <div class="section__circle-container__circle "><img src="https://i.loli.net/2021/01/04/alVGISijU3o1WF6.jpg" style="width: 64px;height: 64px;border-radius: 50%"></div>
                </div>
                   <div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                  <h5 style="font-size: 16px;font-weight: 700">殷思雨</h5>
                       <br/><span style="font-size: 14px">测试项目功能，并提出修改建议，api相关文档编写</span>
                </div>
                     <div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                   <div class="section__circle-container__circle "><img src="https://i.loli.net/2020/12/16/3SrVTwxf5z1kdBF.jpg" style="width: 64px;height: 64px;border-radius: 50%"></div>
                </div>
                   <div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                  <h5 style="font-size: 16px;font-weight: 700">马良城</h5>
                       <br/><span style="font-size: 14px">服务器运营，负载均衡和反向代理</span>
                </div>

                     <div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
				      <div class="section__circle-container__circle "><img src="https://i.loli.net/2020/12/16/AON3UmLWCqoIvHr.jpg" style="width: 64px;height: 64px;border-radius: 50%"></div>
					                  </div>
									                     <div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
														                   <h5 style="font-size: 16px;font-weight: 700">闫梦帆</h5>
																		                          <br/><span style="font-size: 14px">系统功能设计，构建er图</span>
																								                  </div>

																												                       <div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">

                </div>
                   
              </div>
            </div>


          </section>


        </div>



      </main>
    </div>
    <a href="https://github.com/kongqiahaha/shizhan" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">查看源代码</a>
    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  </body>
</html>